<template>
  <el-container class="contain">
    <TreeFilter
      v-show="showTree"
      label="name"
      title="列表"
      :data="treeData"
      :default-value="initParam.departmentId"
      @change="changeTreeFilter"
      class="menu-tree"
      :is-input="false"
      :is-all="false"
      style="width: 180px; height: 100%"
      accordion
    />
    <el-container style="width: calc(100% - 180px); height: 100%">
      <normalCard :title="currentTitle">
        <el-button class="btnChange" type="primary" @click="handleClick">返回</el-button>
        <div class="main-flex">
          <div class="item">
            <div class="chartTitle" style="font-size: 25px">{{ items.title }}({{ route.query.title }})</div>
            <TsxTablePage :tables="items" @click-event="keyIndicatorsDialog" @click-cycle="keyIndicatorsCycleDialog" />
          </div>
        </div>
      </normalCard>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from "vue";
import normalCard from "../../components/normalCard.vue";
import TreeFilter from "@/components/TreeFilter/index.vue";
import TsxTablePage from "./components/TsxtablePage.vue";
import { getCountyCountApi } from "@/api/modules/manyidu";
import { getWxCountyCountApi } from "@/api/modules/wxmanyidu";
import { useRouter, useRoute } from "vue-router";

const route = useRoute();
const router = useRouter();
const treeData = ref<any>([]);
const items = ref<any>([]);
const showTree = ref(true);
const initParam = reactive({ departmentId: "" });
const fetchTreeData = async () => {
  const res = ref<any>();
  if (route.query.name?.includes("家宽")) {
    res.value = await getCountyCountApi(route.query);
  } else {
    res.value = await getWxCountyCountApi(route.query);
  }
  const data = [{ id: "1", name: "满意度", type: "line", data: res.value.data }];
  treeData.value = data;

  // 设置默认选中第一个节点的 id
  if (treeData.value.length > 0) {
    initParam.departmentId = treeData.value[0].id;
    updateContent();
  }
};

const currentNode = computed(() => {
  return findNodeById(treeData.value, initParam.departmentId);
});
const currentTitle = computed(() => currentNode.value?.name);

const updateContent = () => {
  items.value = currentNode.value?.data || [];
};

const findNodeById = (nodes, id) => {
  for (const node of nodes) {
    if (node.id === id) return node;
    if (node.children) {
      const found = findNodeById(node.children, id);
      if (found) return found;
    }
  }
  return null;
};

const changeTreeFilter = val => {
  initParam.departmentId = val;
  updateContent();
};

const handleClick = () => {
  router.push({ name: "twoPage", query: route.query });
};

const keyIndicatorsDialog = val => {
  val["title"] = route.query.title;
  val["option"] = route.query.option;
  val["val1"] = route.query.val1;
  router.push({ name: "threePage", query: val });
};

const keyIndicatorsCycleDialog = val => {
  val["title"] = route.query.title;
  val["option"] = route.query.option;
  val["val1"] = route.query.val1;
  router.push({ name: "girdPage", query: val });
};

onMounted(fetchTreeData);
</script>

<style lang="scss" scoped>
@import "index.scss";
.btnChange {
  padding-left: 20px;
  font-size: 16px;
  color: #91c7ff;
  background-color: rgb(18 142 255 / 30%);
  border: 1px solid rgb(18 142 255 / 80%);
}
</style>
